<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1">
    <meta name="author" content="贾文清">
    <title>百度首页</title>
    <style>
        body {
            margin: 0;
        }

        * {
            box-sizing: border-box;
        }

        ul {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        header {
            width: 100%;
            height: 40px;
            border-bottom: 1px solid lightgrey;
            position: relative;
        }

        .box {
            width: 900px;
            float: right;
        }

        .div1 {
            position: absolute;
        }

        .ulFirst {
            list-style: none;
            margin: 0;
        }

        .ulFirst li {
            float: left;
            padding: 10px;
            margin-top: -3px;
        }

        .ulSecond {
            margin: 0;
            list-style: none;
            float: right;
            margin-right: -20px;
        }

        .ulSecond li {
            float: left;
            margin-top: 7px;
            padding-right: 35px;
            position: relative;
        }

        .clear {
            clear: both;
        }

        section {
            width: 900px;
            height: 45px;
            /* border: 1px solid red; */
            margin: 30px auto;
        }

        section div {
            display: inline-block;
            text-align: center;
        }

        section div:nth-child(1) {
            width: 150px;
            height: 45px;
            /* border: 1px solid blue; */
            background-image: url(1.jpg);
            background-size: 100% 100%;
            float: left;
        }

        section div input {
            display: block;
            width: 600px;
            height: 40px;
            margin-left: 10px;
        }

        section div:nth-child(3) {
            margin: 0;
        }

        section div:nth-child(3) button {
            width: 100px;
            height: 45px;
            background-color: #3388ff;
            color: white;
            font-size: 16px;
            border: 0;
            position: absolute;
            margin-left: -5px;
            margin-top: -28px;
        }

        section div:nth-child(4) {
            float: right;
            position: absolute;
            margin-left: 100px;
            margin-top: 10px;
            padding-left: 10px;
        }

        p {
            width: 300px;
            height: 50px;
        }
        /* header {
            height: 120px;
            background-color: lightcoral;
        } */

        .container {
            width: 1200px;
            margin: 0 auto;
        }

        .nav {
            width: 100%;
            background-color: #01204f;
        }

        .nav-list {
            position: relative;
        }

        .nav-list li {
            float: left;
            height: 40px;
            line-height: 40px;
            z-index: 100;
            position: relative;
        }

        .nav-list li.first {
            background-color: red;
            width: 60px;
            text-align: center;
            margin-right: 2px;
        }

        .nav-list li a {
            color: white;
            text-decoration: none;
            display: block;
            width: 100%;
            height: 100%;
            padding: 0 10px;
        }

        .bg {
            position: absolute;
            height: 40px;
            width: 60px;
            background-color: red;
            top: 0;
            left: 0;
            /* z-index: -1; */
            transition: all 0.3s linear;
        }

        .clearfix::after {
            content: '';
            clear: both;
            display: block;
            height: 0;
            visibility: hidden;
        }

        main {
            height: 2000px;
            background-color: lightgreen;
        }

        .back-to-top {
            width: 80px;
            height: 80px;
            background-color: paleturquoise;
            text-align: center;
            line-height: 30px;
            position: fixed;
            right: 30px;
            bottom: -30px;
            transition: all 0.5s linear;
        }
    </style>
</head>

<body>
    <header>
        <div class="box">
            <div class="div1">
                <ul class="ulFirst">
                    <li><a href="">网页</a></li>
                    <li><a href="">新闻</a></li>
                    <li><a href="">贴吧</a></li>
                    <li><a href="">知道</a></li>
                    <li><a href="">音乐</a></li>
                    <li><a href="">图片</a></li>
                    <li><a href="">视频</a></li>
                    <li><a href="">地图</a></li>
                    <li><a href="">文库</a></li>
                    <li>|</li>
                    <div class="clear"></div>
                </ul>
            </div>
            <ul class="ulSecond">
                <li><a href="">百度首页</a></li>
                <li><a href="">登录</a></li>
                <li><a href="">注册</a></li>
                <li><a href="">百度新闻客户端</a></li>
                <div class="clear"></div>
            </ul>
        </div>
    </header>
    <section>
        <div> </div>
        <div><input type="text"></div>
        <div><button type="button">百度一下</button></div>
        <div>
            <span><a href="">帮助</a></span>
            <span><a href="">高级搜索</a></span>
            <span><a href="">设置</a></span>
        </div>
        <p>
            <input type="radio" name="radio"><span>新闻全文</span>
            <input type="radio" name="radio"><span>新闻标题</span>
        </p>
    </section>
    <nav class="nav">
        <div class="container">
            <ul class="nav-list clearfix">
                <!-- (li>a[href=#])*8 -->
                <li class="first"><a href="#">首页</a></li>
                <li><a href="">百家号</a></li>
                <li><a href="">国内</a></li>
                <li><a href="">国际</a></li>
                <li><a href="">军事</a></li>
                <li><a href="">社会</a></li>
                <li><a href="">财经</a></li>
                <li><a href="">娱乐</a></li>
                <li><a href="">体育</a></li>
                <li><a href="">互联网</a></li>
                <li><a href="">科技</a></li>
                <li><a href="">游戏</a></li>
                <li><a href="">时尚</a></li>
                <li><a href="">女人</a></li>
                <li><a href="">汽车</a></li>
                <li><a href="" 个性推荐></a></li>
                <li><a href="">更多>></a></li>
                <div class="bg"></div>
            </ul>
        </div>
    </nav>
    <div class="container">
        <main>

        </main>
    </div>
    <div class="back-to-top">返回顶部</div>
</body>

</html>
<script>
    var lis = document.querySelectorAll('.nav-list li');
    var bg = document.querySelector('.bg');
    for (var i = 0; i < lis.length; i++) {
        //  鼠标进来改变bg的位置和宽度
        lis[i].onmouseover = function () {
            // console.log(this.offsetLeft);
            // 元素距离容器左边的偏移距离
            var left = this.offsetLeft;
            //  设置bg的偏移距离
            bg.style.left = left + 'px';
            //  获取标签的宽度
            var width = this.offsetWidth;
            bg.style.width = width + 'px';
        }
        //  当鼠标出去的时候，回复bg的位置和宽度
        lis[i].onmouseout = function () {
            bg.style.left = 0;
            bg.style.width = '60px';
        }
    }
    // 点击返回顶部
    var backToTop = document.querySelector('.back-to-top');
    backToTop.onclick = function () {
        document.documentElement.scrollTop = document.body.scrollTop = 0;
    }

    // 动态固定位置
    var nav = document.querySelector('.nav');
    window.onscroll = function () {
        var scrollTop = document.body.scrollTop || document.scrollingElement.scrollTop;
        console.log(scrollTop);
        //固定nav
        if (scrollTop >= 120) {
            nav.style.position = 'fixed';
            nav.style.top = '0';
        } else {
            // 去除固定位置的效果
            nav.style.position = 'static';
        }
        // 当页面卷去的页面超过300时，初夏返回顶部的按钮，否则隐藏
        if (scrollTop > 300) {
            backToTop.style.bottom = '30px';
        } else {
            backToTop.style.bottom = '-30px';
        }


    }

</script>